<!--
 * @Author: 曹捷
 * @Date: 2019-08-28 10:37:22
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-08-18 11:11:19
 * @Description: file content
 -->
<template>
  <view :style="{background:background}" class="navigator">
    <div class="status_bar"></div>
    <view class="Record">
      <view :style="{ color: '#fff', 'font-size': 48 + 'rpx' }" @tap="goBack" class="uni-icon uni-icon-wrapper uni-icon-back" v-if="hasBack" />
      <view v-else></view>
      <text :class="{'active':navigator.ask}">{{navigator.title}}</text>
      <view class="ask">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    navigator: { type: Object },
    background: {
      type: String,
      default: '#0738A3',
    },
    hasBack: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {}
  },
  methods: {
    click(item) {
      if (item == '提问') {
        uni.navigateTo({
          url: '../ask-questions/ask-questions',
        })
      }
      if (item == '发布') {
        uni.navigateTo({
          url: '../index/index',
        })
      }
    },
    goBack() {
      let page = getCurrentPages()
      if (page.length > 1) {
        uni.navigateBack()
      } else {
        uni.redirectTo({
          url: '/',
          fail: function () {
            uni.switchTab({ url: '/' })
          },
        })
      }
    },
  },
}
</script>

<style scoped>
.navigator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(44px + env(safe-area-inset-top));
  z-index: 999;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.fix-top {
  height: env(safe-area-inset-top);
}
.Record {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 44px;
  text-align: center;
}
.Record text {
  font-size: 32upx;
  color: #fff;
  font-family: PingFang-SC-Medium;
  margin-right: 25upx;
}
.Record image {
  width: 34upx;
  height: 36upx;
  vertical-align: middle;
}
.ask {
  font-size: 30upx;
  color: #fff;
  line-height: 44px;
  height: 44px;
  padding-right: 14rpx;
  font-family: PingFang-SC-Medium;
}
.active {
  margin-left: 25upx;
  margin-right: 0upx !important;
}
</style>
